<template>
    <h3>试卷管理</h3>
    <div class="opt">
        <span class="lable">分类:</span>
        <el-select @change="chooseCaregoryFn" style="width: 360px" v-model="form.id">
            <el-option v-for="item in categoryies" :label="item.text" :value="item.id" />
        </el-select>
    </div>
    <div class="opt">
        <span class="lable">试卷:</span>
        <el-input style="width: 360px;" v-model="form.name" placeholder="请输入试卷名称" size="large"></el-input>
    </div>
    <div class="opt">
        <span class="lable">总分:</span>
        <el-input style="width: 360px;" v-model="form.total" placeholder="请输入总分" size="large"></el-input>
    </div>
    <div class="opt">
        <span class="lable">及格:</span>
        <el-input style="width: 360px;" v-model="form.passline" placeholder="请输入及格分数" size="large"></el-input>
    </div>
    <div class="opt">
        <span class="lable">考试时长:</span>
        <el-input style="width: 360px;" v-model="form.time" placeholder="请输入考试时长" size="large"></el-input>
    </div>
    <div class="opt">
        <span class="lable">题目数量:</span>
        <el-input style="width: 360px;" v-model="form.num" placeholder="请输入题目数量" size="large"></el-input>
    </div>
    <div class="opt">
        <span class="lable">题目分值:</span>
        <el-input style="width: 360px;" v-model="form.score" placeholder="题目分值" size="large"></el-input>
    </div>
    <div class="opt">
        <el-button @click="" type="primary" size="large">提交</el-button>
        <el-button @click="" type="warning" plain size="large">重置</el-button>
    </div>
    <div class="category-table">
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="index" label="序号" width="50" />
            <el-table-column prop="text" label="分类" width="180" />
            <el-table-column prop="name" label="试卷名称" width="180" />
            <el-table-column prop="total" label="总分" width="80" />
            <el-table-column prop="passline" label="及格线" width="80" />
            <el-table-column prop="time" label="时长(小时)" width="100" />
            <el-table-column prop="num" label="题目数量(个)" width="150" />
            <el-table-column prop="score" label="分值(分)" width="100" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { categoryList, examAdd, examList, examRemove } from '../../api/request'
import { ElMessage, ElMessageBox } from 'element-plus';
const tableData = ref<any>([])
const categoryies = ref<any>([])
interface RuleForm {
    id: string
    name: string
    text: string
    time: number | string
    total: number | string
    passline: number | string
    eid?: string
    num: number | string
    score: number | string
}
const form = reactive<RuleForm>({
    id: '',
    name: '',
    text: '',
    time: 2,
    total: 100,
    passline: 60,
    num: 0,
    score: 0
})
const categoryListFn = async () => {
    await categoryList()
        .then(
            content => {
                // console.log(content);
                let { code, result } = content
                if (code == 200) {
                    categoryies.value = result
                }
            }
        )
}
const examListFn = async () => {
    await examList()
        .then(
            content => {
                let { code, result } = content
                if (code == 200) {
                    let { code, msg, result } = content;
                    if (code == 200) {
                        let arr = result.map((item: any, i: number) => {
                            item.index = i + 1;
                            return item;
                        })
                        tableData.value = arr;
                    } else {
                        ElMessage.error(msg)
                    }
                }
            }
        )
}
const chooseCaregoryFn = async () => {
    let arr = categoryies.value.filter((item: any) =>
        item.id == form.id
    )
    if (arr.length == 1) {
        form.text = arr[0].text
    }
    console.log(form.id);
    console.log(form.text);
    console.log(arr);

}

categoryListFn()
examListFn()
</script>

<style lang="scss">
.opt {
    margin-top: 15px;

}

.lable {
    width: 100px;
    display: inline-block;
    padding: 0 15px;
    text-align: right;
}
</style>